<template>
	<view class="box-content">
		<view class="indextabs">
			<fui-tabs :tabs="tabs" sliderBackground="#FFDD00" scroll alignLeft :current="navIndex"
				@change="navTabChange" selectedColor="#000" :short="false" background="none" />
			<view style="width:300rpx"></view>
		</view>
		<!-- 达人 -->
		<view class="navPage" v-show="navIndex==0">
			<view class="tabListBox">
				<view class="tabList" :style="{width:isShowSearch ? '85%': '100%'}">
					<fui-tabs :tabs="pageTabs" :current="tabIndex" isSlider scroll alignLeft selectedColor="#000"
						sliderBackground="#FFDD00" @change="changePages"></fui-tabs>
				</view>
				<view class="searchBtn" v-if="isShowSearch" @click="openSearch">筛选</view>
			</view>
			<swiper style="	padding-top: 190rpx;" :current="tabIndex" :duration="300" @change="tabChange"
				@animationfinish="animationEnd" :style="{height: height + 'px'}">
				<swiper-item class="fui-swiper__item" v-for="page in pageTabs.length" :key="page">
					<view v-if="tabIndex == 2 || tabID == 0">
						<scroll-view class="scroll" scroll-y :show-scrollbar="false" :style="{ height: height+ 'px' }"
							@scrolltolower="onPullUpLoading(page)" :refresher-enabled="true"
							:refresher-triggered="isRefreshList" @refresherrefresh="onRefresherrefresh(page)">
							<index-redlist :page="page"></index-redlist>
						</scroll-view>
					</view>
					<view v-else>
						<scroll-view class="scroll" scroll-y :show-scrollbar="false" :style="{ height: height + 'px' }"
							@scrolltolower="onPullUpLoading(page)" :refresher-enabled="true"
							:refresher-triggered="isRefreshList" @refresherrefresh="onRefresherrefresh(page)">
							<view class="padding-all-20" v-if="ArtisterList.length != 0">
								<listBox :ArtisterList="ArtisterList"></listBox>
							</view>
							<view v-else
								style="display: flex;align-items: center;justify-content: center;height:100%;color: #7F7F7F;">
								{{noPage?'暂无相关艺人':''}}
							</view>
							<uni-load-more v-if="ArtisterList.length>5" :status="more"></uni-load-more>
						</scroll-view>
					</view>
				</swiper-item>
			</swiper>

		</view>
		<!-- 动态 -->
		<view class="navPage" v-show="navIndex==1">
			<view class="tabListBox">
				<view class="tabList" :style="{width:isShowSearch ? '85%': '100%'}">
					<fui-tabs :tabs="dynamicTabs" :current="dynamicIndex" isSlider scroll alignLeft selectedColor="#000"
						sliderBackground="#FFDD00" @change="changeDynamic"></fui-tabs>
				</view>
				<!-- <view class="searchBtn" v-if="isShowSearch" @click="openSearch">筛选</view> -->
			</view>
			<swiper style="	padding-top: 190rpx;" :current="dynamicIndex" :duration="300" @change="changeDynamic"
				:style="{height: height + 'px'}">
				<swiper-item class="fui-swiper__item" v-for="(item,index) in dynamicTabs" :key="index">
					<view class="">
						<scroll-view class="scroll" scroll-y :show-scrollbar="false" :style="{ height: height + 'px' }">
							<view class="padding-all-20">
								<DynamicList></DynamicList>
							</view>
							<!-- 				<view v-else
								style="display: flex;align-items: center;justify-content: center;height:100%;color: #7F7F7F;">
								{{noPage?'暂无动态':''}}
							</view> 
							 <uni-load-more v-if="dynamicList.length>5" :status="more"></uni-load-more> -->
						</scroll-view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 分享 -->
		<view class="navPage" v-show="navIndex==2">
			<view class="tabListBox">
				<view class="tabList" :style="{width:isShowSearch ? '85%': '100%'}">
					<fui-tabs :tabs="shareTabs" :current="shareIndex" isSlider scroll alignLeft selectedColor="#000"
						sliderBackground="#FFDD00" @change="changeShare"></fui-tabs>
				</view>
				<!-- <view class="searchBtn" v-if="isShowSearch" @click="openSearch">筛选</view> -->
			</view>
			<swiper style="	padding-top: 190rpx;" :current="shareIndex" :duration="300" @change="changeShare"
				:style="{height: height + 'px'}">
				<swiper-item class="fui-swiper__item" v-for="(item,index) in shareTabs" :key="index">
					<view v-show="index==0">
						<scroll-view class="scroll" scroll-y :show-scrollbar="false" :style="{ height: height + 'px' }">
							<view class="padding-all-20">
								<GoodsList></GoodsList>
							</view>
							<!-- 				<view v-else
								style="display: flex;align-items: center;justify-content: center;height:100%;color: #7F7F7F;">
								{{noPage?'暂无动态':''}}
							</view> 
							 <uni-load-more v-if="dynamicList.length>5" :status="more"></uni-load-more> -->
						</scroll-view>
					</view>
					<view v-show="index==1">
						<scroll-view class="scroll" scroll-y :show-scrollbar="false" :style="{ height: height + 'px' }">
							<view class="padding-all-20">
								<RecruitList></RecruitList>
							</view>
							<!-- 				<view v-else
								style="display: flex;align-items: center;justify-content: center;height:100%;color: #7F7F7F;">
								{{noPage?'暂无动态':''}}
							</view> 
							 <uni-load-more v-if="dynamicList.length>5" :status="more"></uni-load-more> -->
						</scroll-view>
					</view>
					<view v-show="index==2">
						<scroll-view class="scroll" scroll-y :show-scrollbar="false" :style="{ height: height + 'px' }">
							<view class="padding-all-20">
								<TaskList></TaskList>
							</view>
							<!-- 				<view v-else
								style="display: flex;align-items: center;justify-content: center;height:100%;color: #7F7F7F;">
								{{noPage?'暂无动态':''}}
							</view> 
							 <uni-load-more v-if="dynamicList.length>5" :status="more"></uni-load-more> -->
						</scroll-view>
					</view>
					<view v-show="index==3">
						<scroll-view class="scroll" scroll-y :show-scrollbar="false" :style="{ height: height + 'px' }">
							<view class="padding-all-20">
								<ActivityList></ActivityList>
							</view>
							<!-- 				<view v-else
								style="display: flex;align-items: center;justify-content: center;height:100%;color: #7F7F7F;">
								{{noPage?'暂无动态':''}}
							</view> 
							 <uni-load-more v-if="dynamicList.length>5" :status="more"></uni-load-more> -->
						</scroll-view>
					</view>

				</swiper-item>
			</swiper>

		</view>




		<uni-popup ref="popup" type="bottom" background-color="#fff" height="100vh" :isBottom="false">
			<view class="popup" style="height:100vh">
				<view class="popupTitle flexbc">
					<view @click="isCloseSearchSearch">
						<fui-icon name="close" size="48"></fui-icon>
					</view>
					<view>
						<text class="fs-36" style="float:left;">筛选</text>
						<view style="float:left;padding:7rpx" v-if="selectCount > 0">
							<fui-badge :value="selectCount" background="#ff0000" color="#fff"></fui-badge>
						</view>
					</view>
					<view></view>
				</view>
				<view class="popupCity flexbc">
					<view>当前定位城市：{{ MyCity.text }}</view>
					<view style="color:#00cbff" @click="selectCurrCity">选择定位城市</view>
					<view style="color:#00cbff" @click="selectAllCity">全部城市</view>
				</view>
				<view style="height:100rpx">
					<view style="float:left;padding:30rpx;">选择地区</view>
					<view @click="showCity" style="float:right;padding:30rpx;">{{formData.city}}</view>
				</view>
				<scroll-view scroll-y style="height:900rpx">
					<view class="popupLabelBoxs">
						<view class="searchTitle">性别</view>
						<view class="popupFlex">
							<view v-for="(item,index) in searchSex" :key="index" class="searchLabel"
								:class="currSearchSex == item.sex && 'sed'" @click="onSearchSex(item)">
								{{ item.sexName }}
							</view>
						</view>
						<view class="searchTitle" v-if="isShowMainLabel">身份</view>
						<view class="popupFlex" v-if="isShowMainLabel">
							<!-- 主标签 -->
							<view v-for="(item,index) in MasterArterLabels" :key="index"
								@click="searchLabel(1, item, index)" class="searchLabel"
								:class="currArterLabel == item.LabelID && 'sed'">
								{{ item.LabelName }}
							</view>
						</view>

						<view class="searchTitle" v-if="isShowSonLable">标签</view>
						<view v-if="isShowSonLable && selectMasterLabels && Object.keys(selectMasterLabels).length != 0"
							class="popupFlex">
							<view v-for="(item,index) in selectMasterLabels.sub" :key="index"
								@click="searchLabel(3, item)" class="searchLabel"
								:class="subLabelIDs.includes(item.LabelID) && 'sed'">
								{{ item.LabelName }}
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="popupBottom flexbc">
					<button class="popupClearBtn" @click="closeSearch">清除</button>
					<button class="popupSubmitBtn" @click="onConfirmSearch">确定</button>
				</view>
			</view>
		</uni-popup>
		<fui-gallery :urls="photoUrls" :show="photoShow" @hide="hideGallery" :current="currentIndex"></fui-gallery>
		<fui-picker linkage :layer="2" :options="cityOptions" :show="cityShow" @change="changeCity"
			@cancel="pickerCancel('city')"></fui-picker>
	</view>
</template>

<script>
	import cityData from "@/script/city.js";
	import listBox from "./components/listBox.vue";
	import TaskList from "./components/task-list.vue";
	// import indexArtistes from "./components/index-artistes.vue";
	import indexRedlist from "./components/index-redlist.vue";
	import RecruitList from "./components/recruit-list.vue";
	import GoodsList from "./components/goods-list.vue";
	import DynamicList from "./components/dynamic-list.vue";
	import ActivityList from "./components/activity-list.vue";


	export default {
		components: {
			ActivityList,
			listBox,
			DynamicList,
			TaskList,
			RecruitList,
			GoodsList,
			// indexArtistes,
			indexRedlist,
			// AuthLabel,
			// PersonalityLabel,
			// HeadWear
		},
		data() {
			return {
				navIndex: 0,
				dynamicIndex: 0,
				shareIndex: 0,
				tabs: [{
					name: "达人",
					id: 1,
				}, {
					name: "动态",
					id: 2,
				}, {
					name: "分享",
					id: 3,
				}],
				shareTabs: [{
						name: "商品",
						id: 1,
					},
					{
						name: "招聘",
						id: 2,
					},
					{
						name: "任务",
						id: 3,
					},
					{
						name: "活动",
						id: 4,
					}
				],

				dynamicTabs: [{
					name: "全部",
					id: 1,
				}, {
					name: "同城",
					id: 2,
				}, {
					name: "关注",
					id: 3,
				}],
				timer: null,
				noPage: false,
				flage: true,
				// 是否显示筛选按钮
				isShowSearch: true,
				// 是否显示主标签
				isShowMainLabel: true,
				/**
				 * 临时数据
				 * tabName 接收tab 点击之后的name    更换为->   lableID  
				 */
				tabName: '',
				currentIndex: 0,
				height: 0,
				cityShow: false,
				cityOptions: [],
				// 身份子项
				selectMasterLabels: {},
				formData: {
					cityJson: {},
					city: '全部',
					cityCode: []
				},
				searchSex: [{
						sex: -1,
						sexName: '全部'
					},
					{
						sex: 0,
						sexName: '女'
					},
					{
						sex: 1,
						sexName: '男'
					}
				],
				currSearchSex: -1,
				MyCity: {
					text: '选择地区'
				},
				selectCount: 0,
				addCity: false,
				addLabel: false,
				pageTabs: [],
				ArtisterList: [],
				photoUrls: [],
				photoShow: false,
				tabIndex: 0,
				tabID: -2,
				more: '',
				page: 1,
				// 身份标签
				MasterArterLabels: [],
				// 标签
				MasterLabels: [],
				currArterLabel: 0,
				currLabel: 0,
				indexType: 0,
				isRequest: false,

				isSex: false,
				isLabel: false,
				isSearch: false,
				isShowSonLable: false,
				baseUrl: '',

				// 子标签标签
				subLabelIDs: [],
				// 是否开始下拉加载功能
				isRefreshList: false

			};
		},
		onLoad() {
			this.baseUrl = this.$baseUrl;
			this.tabIndex = 0;
			this.cityOptions = cityData.cityData

			// 进入页面之前先清一遍
			this.ArtisterList = [];
			// 顶部tab数据
			this.getTopTabList()
			// 标签
			this.getLableList()
			// 艺人列表
			this.getArtistesList()
		},
		onShow() {
			if (uni.getStorageSync("MyCity")) {
				this.MyCity = uni.getStorageSync("MyCity");
			}
			this.page = 1;
			let time = 80
			// #ifdef H5
			time = 200
			// #endif
			setTimeout(() => {
				this.height = uni.getSystemInfoSync().windowHeight;

				// #ifdef MP
				// this.getStatus().then((res) => {})
				// #endif
			}, time)
			// this.onGetList();
		},
		// onPullDownRefresh () {
		// 	this.RefreshArtistesList()
		// 	// 停止当前页面下拉刷新
		// 	uni.stopPullDownRefresh();
		// },
		methods: {
			navTabChange(e) {

				let index = e.index
				if (this.navIndex === index) return;
				this.navIndex = index;
				// this.tabIndex = 0
				// this.dynamicIndex = 0
				// this.shareIndex=0
			},
			// 下拉刷新
			onRefresherrefresh(page) {
				this.isRefreshList = true;
				this.page = 1;
				if (this.tabIndex == page) this.RefreshArtistesList()

			},
			selectCurrCity() {
				this.formData.cityCode = [];
				this.formData.city = this.MyCity.text;
				this.formData.cityCode.push(this.MyCity.subText);
				if (this.city !== '全部' && this.addCity == false) {
					this.selectCount = this.selectCount + 1
					this.addCity = true
				} else {
					if (this.city == '全部') {
						this.selectCount = this.selectCount - 1
						this.addCity = false
					}
				}
			},
			// 筛选确定
			onConfirmSearch() {
				this.page = 1

				// return;
				this.page = 1;
				this.isSearch = true;
				uni.showLoading({
					title: '加载中'
				})
				this.ArtisterList = [];

				this.getArtistesList()


				this.$refs.popup.close()

				// this.formData.cityCode = 100000;
				// this.currArterLabel = 0;
				// this.subLabelIDs = [];
				// this.currSearchSex = -1;
			},
			// 筛选标签
			getLableList() {
				this.$httpost('/Artister/SearchLabels', {}).then(res => {
					if (res.code == 200) {
						// 标签
						this.MasterLabels = res.data.Labels.MasterLabels;
						// 身份
						this.MasterArterLabels = res.data.Labels.MasterArterLabels;

						res.data.Labels.MasterLabels.forEach(item => {
							if (item.sub) this.MasterArterLabels = this.MasterArterLabels.concat(item.sub)
						})

					}
				})
			},

			// 艺人顶部tab数据
			getTopTabList() {
				this.$httpost('/Artister/IndexTabs', {}).then(res => {
					if (res.code == 200) {
						this.currArterLabel = res.data.ArtisterTabs[0].id
						this.pageTabs = [...this.pageTabs, ...res.data.ArtisterTabs];
						this.pageTabs.forEach((item, index) => item['index'] = index);
					}
				})
			},
			// 下拉加载艺人列表
			RefreshArtistesList() {
				this.noPage = false
				let cityCode = null;

				// 如果点击同城
				if (this.tabID == -1) {
					console.log(this.MyCity, !this.MyCity.subText, '22222222');
					if (!this.MyCity.subText) {
						this.ArtisterList = []
						this.noMyCity = false
						this.noPage = true
						this.flage = true
						uni.showToast({
							icon: 'none',
							duration: 3000,
							title: '请先去主页选择城市'
						});
						return
					} else {
						uni.showLoading({
							title: '加载中'
						});
						this.noMyCity = true
						cityCode = this.MyCity.subText;
					}

				} else {
					// 不是同城点击了筛选
					if (this.isSearch) {
						cityCode = this.formData.cityCode && Array.isArray(this.formData.cityCode) ? this.formData
							.cityCode[0] : 100000;
					} else {
						// 不是同城没有点击筛选
						cityCode = 100000;
					}
				}



				// 入参
				let options = {
					isSearch: this.isSearch,
					tabIndex: this.tabID,
					// City: Array.isArray(this.formData.cityCode) && this.formData.cityCode.length != 0? this.formData.cityCode[0]: 100000,
					labelID: this.tabID,
					subLabelIDs: [],
					City: cityCode,
					page: 1,
					SearchSex: this.currSearchSex,
					isSearch: this.isSearch
				}


				if (!this.isRefreshList && this.tabID != -1) {
					uni.showLoading({
						title: '加载中'
					});
				}

				this.$httpost('/Artister/IndexList', options).then(res => {
					if (res.code == 200) {
						this.ArtisterList = [];
						this.ArtisterList = res.data.ArtisterList;
						this.noPage = true
						this.flage = true
						this.more = ''
						uni.hideLoading();
						if (this.isRefreshList) {
							setTimeout(() => {
								this.isRefreshList = false;
							}, 1000)
						}
						// uni.showToast({ title: '加载完成', icon: 'success' })
					}
				})
			},
			// 艺人列表
			getArtistesList() {
				this.noPage = false

				console.log('this.currSearchSex', this.currSearchSex)

				let cityCode = null;

				// 如果点击同城
				if (this.tabID == -1) {
					cityCode = this.MyCity.subText;
				} else {
					// 不是同城点击了筛选
					if (this.isSearch) {
						cityCode = this.formData.cityCode && Array.isArray(this.formData.cityCode) ? this.formData
							.cityCode[0] : 100000;
					} else {
						// 不是同城没有点击筛选
						cityCode = 100000;
					}
				}

				let options = {
					tabIndex: this.tabID,
					labelID: this.currArterLabel ? this.currArterLabel : -2,
					subLabelIDs: this.isShowSonLable ? this.subLabelIDs : [],
					SearchSex: this.currSearchSex,
					// City: Array.isArray(this.formData.cityCode) && this.formData.cityCode.length != 0? this.formData.cityCode[0]: 100000,       // 上次修改
					City: cityCode,
					page: this.page,
					isSearch: this.isSearch
				}
				// labelID: this.currArterLabel ? this.currArterLabel : -2,
				// subLabelIDs:this.isShowSonLable? this.subLabelIDs : [],
				// SearchSex: this.currSearchSex ? this.currSearchSex : -1,

				console.log('this.options', options)

				this.more = 'loading';
				this.$httpost('/Artister/IndexList', options).then(res => {
					if (res.code == 200) {
						if (this.ArtisterList.length != 0) {

							this.ArtisterList = [...this.ArtisterList, ...res.data.ArtisterList];

							this.noPage = true
							this.flage = true
							if (res.data.ArtisterList.length == 0) this.more = 'onMore';
						} else {
							this.flage = true
							if (res.data.ArtisterList.length == 0) this.more = 'onMore';
							this.ArtisterList = res.data.ArtisterList;
							this.noPage = true

							this.more = '';
						}
						uni.hideLoading();
						console.log(this.ArtisterList, '	this.ArtisterList');
					}
				})
			},
			onPullUpLoading(index) {
				if (this.flage && this.more != 'onMore') {
					this.flage = false
					this.page += 1;
					this.getArtistesList();
				}

			},

			// 筛选选择身份，标签
			searchLabel(isArt, item, index) {
				if (isArt == 3) {
					if (this.subLabelIDs.indexOf(item.LabelID) != -1) {
						let index = this.subLabelIDs.indexOf(item.LabelID)
						this.subLabelIDs.splice(index, 1)
					} else {
						this.subLabelIDs.push(item.LabelID)
					}

				}
				this.screenIndex = index;

				if (isArt == 1) {
					this.subLabelIDs = [];
					if (!item.sub) {
						this.isShowSonLable = false;
					}

					this.currArterLabel = item.LabelID;
					// 身份子项
					this.selectMasterLabels = item;
					this.isShowSonLable = true;
					// 如果点击的是全部 隐藏子标签
					if (item.LabelID == -2) this.isShowSonLable = false;
				}


				if (index !== 0) {
					this.isLabel == false
					if (this.isLabel == false) this.selectCount = this.selectCount + 1;
					// this.selectCount = this.selectCount + 1;
					this.isLabel = true;
				} else {
					this.isLabel = false;
					this.selectCount = this.selectCount - 1;
				}
			},
			// 选择性别
			onSearchSex(item) {
				this.currSearchSex = item.sex;

				if (item.sex !== -1) {
					this.isSex == false
					if (this.isSex == false) this.selectCount = this.selectCount + 1;
					// this.selectCount = this.selectCount + 1;
					this.isSex = true;
				} else {
					this.isSex = false;
					this.selectCount = this.selectCount - 1;
				}
			},
			selectAllCity() {
				this.formData.city = '全部'
				this.formData.cityCode = 100000;
				if (this.selectCount !== 0) {
					this.selectCount = this.selectCount - 1
					this.addCity = false
				}
			},
			showCity(event) {
				// this.City = event.value[1]
				this.cityShow = true;
			},
			changeCity(e) {
				this.formData.cityJson = e;
				this.formData.city = e.result;
				this.formData.cityCode = e.value;
				// this.MyCity.subText = e.value[1];
				this.cityShow = false;
				if (this.formData.city !== '全部' && this.addCity == false) {
					this.addCity = true;
					this.selectCount = this.selectCount + 1;
				}
			},
			pickerCancel(type) {
				if (type == 'city') {
					this.cityShow = false
				}
			},
			showPhoto(photos, index) {
				uni.previewImage({
					current: index,
					urls: photos,
					showmenu: true,
				})

			},
			hideGallery() {
				this.photoShow = false;
			},
			gotoArtiter(artisterID) {
				uni.navigateTo({
					url: '/artistesPages/pages/artister?artisterID=' + artisterID
				})
			},
			openSearch() {

				this.formData.city = '全部';
				this.formData.cityCode = 100000;

				// 如果是同城的情况赋值
				if (this.tabID == -1) {
					this.formData.city = this.MyCity.text;
					this.formData.cityCode = this.MyCity.subText;
				}
				this.$refs.popup.open('bottom')
			},
			// 关闭筛选框
			isCloseSearchSearch() {
				this.$refs.popup.close();
			},
			// 筛选清除
			closeSearch() {
				this.formData.city = '全部';
				this.isSearch = false;
				this.formData.cityCode = 100000;
				this.subLabelIDs = [];
				this.currSearchSex = -1;
				// this.selectCount = 0;
				this.SearchSex = -1;
				this.RefreshArtistesList();
				this.$refs.popup.close();
			},
			// swper 滑动
			tabChange(event) {
				console.log(this.tabIndex, '滑动切换', event.detail.current);
				this.isSearch = false;
				// this.ArtisterList = [];
				this.page = 1;
				this.flage = true
				this.more = ''

			},
			// 滑动动画结束后再执行
			animationEnd(event) {
				console.log(this.tabIndex, '滑动动画结束切换', event.detail.current);
				this.tabIndex = event.detail.current;
			},
			changeTabs(e) {
				console.log(this.tabIndex, '点击标签切换', e.index);
				this.tabIndex = e.index;
				// 切换后 清楚所有筛选条件
				this.formData.cityCode = 100000;
				this.subLabelIDs = [];
				this.currSearchSex = -1;
				this.selectCount = 0
				// 到这里--------------
				this.flage = true
				this.more = ''
				// 点击显示身份信息（模特、主播等身份信息)
				this.isShowMainLabel = true;
				this.isShowSonLable = true;
				// 点击tab 之后 取消筛选状态
				this.isSearch = false;
				// 临时数据   更换->   lableID 
				this.tabName = e.name;

				// 身份子项
				this.selectMasterLabels = this.MasterArterLabels.filter(item => e.name == item.LabelName)[0]
				this.page = 1;

				this.tabID = e.id;
				// 赋值LableID
				this.currArterLabel = e.id;


				if (e.index != 2) {
					// 确认是否正在请求, isSearch 不是筛选的情况下在执行
					if (!this.isSearch) this.RefreshArtistesList();
					this.isShowSearch = true; // 隐藏筛选按钮
				} else {
					// 判断是否噬红人榜按钮
					this.isShowSearch = false; // 隐藏筛选按钮

				}

				// 判断tab目前是否选择的身份，如果是隐藏筛选内的身份信息，显示子信息
				if (e.index > 2) {
					this.isShowMainLabel = false; // 隐藏筛选内身份信息（模特、主播等身份信息)
				}
			},
			myChangePages(e) {
				if (this.timer) {
					clearInterval(this.timer)
				}

				this.timer = setTimeout(() => {
					this.changeTabs(e)
				}, 500)
			},
			changePages(e) {
				return this.myChangePages(e)

			},
			changeShare(e) {
				if (e.detail) {
					this.shareIndex = e.detail.current
				} else {
					this.shareIndex = e.index
				}
			},
			changeDynamic(e) {
				if (e.detail) {
					this.dynamicIndex = e.detail.current
				} else {
					this.dynamicIndex = e.index
				}
			},

		}
	}
</script>

<style lang="scss">
	.indextabs {
		box-sizing: border-box;
		background-color: white;
		position: fixed;
		z-index: 1000;
		width: 100vw;
		display: flex;
		padding-top: 70rpx;
	}

	.scroll::-webkit-scrollbar {
		display: block;
		width: 4px !important;
		height: 1px !important;
		overflow: auto !important;
		background: transparent !important;
		-webkit-appearance: auto !important;
	}

	.tabListBox {
		padding-top: 190rpx;
		position: fixed;
		width: 100vw;
		z-index: 50;
		top: 0rpx;
		height: 96rpx;
		background-color: #FFF;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		justify-content: space-between;
	}

	.tabList {
		height: 96rpx;
		// 
	}

	.tabLabel {
		padding: 10rpx;
		padding-bottom: 0rpx;
	}

	.tabTopline {
		height: 96rpx;
	}

	.diline {
		border-bottom: 3rpx solid #666;
	}

	.searchBtn {
		width: 60rpx;
		text-align: center;
		background-color: #e0e0e0;
		color: #333;
		padding: 5rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		margin: 15rpx;
		margin-top: 30rpx;
		height: 35rpx;
		border-radius: 10rpx;
	}

	.artistes {
		padding: 20rpx
	}

	.artistesBox {
		margin-top: 20rpx;
		height: auto;
		background-color: #FFF;
		border-radius: 15rpx;
		padding: 26rpx;
		padding-bottom: 40rpx;

		&:first-child {
			margin-top: 96rpx;
		}
	}

	.artInfos {
		height: 60rpx;
	}

	.artHeadPic {
		position: relative;
		float: left;
		width: 80rpx;
		height: 80rpx;
		background-color: #CCC;
		background-position: center;
		background-size: cover;
		border-radius: 80rpx;
	}

	.artHeadPic image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
	}

	.artInfo {
		float: left;
		width: 60vw;
		margin-left: 20rpx;
	}

	.artName {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-size: 30rpx;
	}

	.artLabel {
		font-size: 20rpx;
		color: #999;
		font-size: 20rpx;
		color: #999;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.artState {
		width: 96rpx;
		float: right;
		text-align: right;
		color: #999
	}

	.geline {
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.artAddr {}

	.artPics {
		clear: both;
		position: relative;
		display: flex;
		margin-top: 40rpx;
	}

	.artPic {
		width: 30vw;
		height: 270rpx;
		background-color: #e0e0e0;
		margin: 10rpx;
		position: relative;
		border-radius: 5rpx;
		overflow: hidden;
	}

	.artPic image {
		width: 100%;
		height: 270rpx;
		border-radius: 5rpx;
	}

	.artPicCount {
		position: absolute;
		z-index: 50;
		bottom: 0;
		right: 0;
		width: 60rpx;
		height: 30rpx;
		padding: 5rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #FFF;
		text-align: center;
		border-radius: 5rpx;
		font-size: 20rpx;
	}

	.popup {
		width: 100vw;
		height: 1400rpx;
		background-color: #FFF;
	}

	.popupTitle {
		padding: 20rpx;
	}

	.popupCity {
		padding: 20rpx;
		background: #f0f0f0;
	}

	.popupLabelBoxs {
		padding: 20rpx;
		padding-top: 0;
	}

	.popupFlex {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.searchTitle {
		clear: both;
		font-size: 30rpx;
		font-weight: bold;
		margin-right: 20rpx;
		padding: 20rpx 0;
	}

	.searchTitle:first-child {
		padding-top: 0;
	}

	.searchLabel {
		width: calc((100% - 30rpx) /4);
		background-color: #f0f0f0;
		color: #666;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 10rpx;
		margin-top: 10rpx;
		margin-right: 10rpx;
		text-align: center;

		&:nth-child(4n) {
			margin-right: 0;
		}
	}

	.searchLabel.sed {
		background-color: #FFDD00;
	}

	.popupBottom {
		position: absolute;
		z-index: 800;
		width: 100vw;
		bottom: 0rpx;
		height: 100rpx;
		border-top: 1rpx solid #e0e0e0;
		background-color: #fff;
	}

	.popupClearBtn {
		width: 35vw;
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		background: #e0e0e0;
		border: 0rpx;
		color: #000;
		margin: 10rpx;
	}

	.popupSubmitBtn {
		width: 60vw;
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		background-color: $globalColor;
		border: 0rpx;
		color: #000;
		margin: 10rpx;
	}

	.noneInfos {
		text-align: center;
		padding: 100rpx;
		color: #999
	}
</style>